<template>
  <div class="billing_Zone" :style="{ '--gridBg': info.kaidan_area_color }">
    <c-title :hide="false" :text="'开单专区'"></c-title>
    <div class="headImg">
      <img :src="info.kaidan_area_background_url" alt="" />
    </div>
    <div class="listBox">
      <div class="lis" v-for="(item, index) in list" :key="index">
        <div class="title">{{ item.title }}</div>
        <div class="priceBox">
          <div class="price">{{ $i18n.t("money") }}{{ item.price }}</div>
          <div class="original_price">{{ $i18n.t("money") }}{{ item.market_price }}</div>
          <div class="discount">{{self_reward_name}}{{ $i18n.t("money") }}{{ item.cloud_shop_reward_amount }}</div>
        </div>
        <div class="imgLis">
          <img :src="item.thumb" alt="" class="cimg" v-if="item.thumb" />
          <template v-if="item.thumb_url.length > 0">
            <img :src="items" alt="" class="cimg" v-for="(items, index) in arraySlice(item.thumb_url)" :key="index" />
          </template>
        </div>
        <div class="button">
          <div class="btn" @click="toGoodDetail(item)">立即抢购</div>
          <div class="btn confirm" @click="toShare(item.brand_id)">立即分享</div>
        </div>
      </div>
    </div>
    <div class="bottom_btn">
      <div class="share_btn" @click="randomShare">立即分享给顾客</div>
    </div>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      info: [],
      list: [],
      page: 1,
      total_page: 0,
      isLoadMore: true,
      self_reward_name:''
    };
  },
  activated() {
    let basic_info = JSON.parse(localStorage.getItem("yz_basic_info")).plugin_setting.cloud_shop;
    this.self_reward_name = basic_info.self_reward_name;
    this.init();
    this.getData();
  },
  methods: {
    arraySlice(thumb_url){
      return thumb_url.slice(0,2)
    },
    randomShare() {
      // 从list里面随机取一个brand_id分享
      let lis = this.list.filter(item => item.brand_id != 0);
      let randomIndex = Math.floor(Math.random() * lis.length);
      let brand_id = this.list[randomIndex].brand_id;
      this.$router.push(this.fun.getUrl("cloud_shop_sharePage", { brand_id: brand_id }));
    },
    toShare(bid) {
      this.$router.push(this.fun.getUrl("cloud_shop_sharePage", { brand_id: bid }));
    },
    toGoodDetail(item) {
      this.$router.push(this.fun.getUrl("goods", { id: item.id }));
    },
    init() {
      this.page = 1;
      this.list = [];
      this.isLoadMore = true;
      this.total_page = 0;
    },
    async getData() {
      let { data, msg, result } = await $http.post("plugin.cloud-shop.frontend.kaidan.index", {}, "");
      if (result) {
        this.info = data;
        this.list = data.list.data;
        this.total_page = data.list.last_page;
        this.isLoadMore = true;
      } else {
        this.$toast(msg);
      }
    },
    async getMoreData() {
      if (!this.isLoadMore) return;
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page += 1;
        let json = {
          page: this.page
        };
        let { data, msg, result } = await $http.post("plugin.cloud-shop.frontend.kaidan.index", json, "");
        this.isLoadMore = true;
        if (result) {
          this.list = this.list.concat(data.list.data);
        } else {
          this.page = this.page - 1;
          this.$toast(msg);
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.billing_Zone {
  background: var(--gridBg);
  min-height: 100vh;
  padding-bottom: 4rem;
  .headImg {
    width: 23.44rem;
    // height: 11.25rem;
    img {
      width: 100%;
      height: auto;
      display: block;
    }
  }
  .bottom_btn {
    width: 100%;
    background: #ffffff;
    box-shadow: 0rem -0.03rem 0.31rem 0.03rem #f5f5f5;
    position: fixed;
    bottom: 0;
    left: 0;
    .share_btn {
      margin: 0.59rem 0.75rem;
      padding: 0.75rem 0;
      background-color: var(--gridBg);
      font-weight: 500;
      font-size: 0.94rem;
      color: #ffffff;
      border-radius: 1.28rem;
    }
  }
  .listBox {
    padding: 0.63rem 0.75rem;
    box-sizing: border-box;
    .lis {
      width: 21.94rem;
      background: #ffffff;
      border-radius: 0.5rem;
      padding: 0.75rem 0.63rem;
      box-sizing: border-box;
      margin-bottom: 0.5rem;
      overflow: hidden;
      .imgLis {
        display: flex;
        margin-top: 0.69rem;
        margin-block: 0.94rem;
        .cimg {
          width: 6.56rem;
          height: 6.56rem;
          background: #f0f0f1;
          border-radius: 0.5rem;
          margin: 0;
          margin-right: 0.5rem;
        }
        .cimg:last-child {
          margin-right: 0;
        }
      }
      .button {
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 0 0.94rem;
        box-sizing: border-box;
        .btn {
          flex: 1;
          background: #ffffff;
          border-radius: 1.25rem 1.25rem 1.25rem 1.25rem;
          border: 0.03rem solid var(--gridBg);
          padding: 0.69rem 0;
          box-sizing: border-box;
          font-weight: 500;
          font-size: 0.88rem;
          color: var(--gridBg);
          line-height: 0.95rem;
        }
        .confirm {
          margin-left: 0.69rem;
          border: none;
          background: var(--gridBg);
          color: #ffffff;
        }
      }
      .title {
        font-weight: 500;
        font-size: 1rem;
        text-align: left;
      }
      .priceBox {
        margin-top: 0.31rem;
        display: flex;
        align-items: center;
        .price {
          font-weight: 500;
          font-size: 1rem;
          color: #f15353;
        }
        .original_price {
          font-size: 0.81rem;
          color: #999999;
          text-decoration-line: line-through;
          text-transform: none;
          margin-left: 0.22rem;
        }
        .discount {
          font-size: 0.75rem;
          color: #f15353;
          line-height: 0.9rem;
          padding: 0.25rem 0.41rem;
          border-radius: 0.38rem;
          background: #feeded;
          margin-left: 0.63rem;
        }
      }
    }
    .lis:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
